<template>
  <div class="height-187 pad-20">
    <span class="font-14 font-color-3">账号安全</span>
    <div class="mar-l-27 mar-t-16">
      <div>
        <div>
          <span class="font-14 font-color-3">登录密码</span>
          <span class="edit-password font-12 cursor-p" @click="editPwdEvent">修改密码</span>
        </div>
        <div class="font-12 font-color-9 mar-t-3">互联网存在被盗风险，建议您定期更改密码以保护安全。</div>
      </div>
      <div class="mar-t-22">
        <div>
          <span class="font-14 font-color-3">绑定手机: {{loginUserObj.phone}}</span>
          <span class="edit-phone font-12 cursor-p" @click="editPhoneEvent">修改手机</span>
        </div>
        <div class="font-12 font-color-9 mar-t-3">用于登录、重置密码或其他安全验证，建议您定期更改密码以保护安全。</div>
      </div>
    </div>
    <!-- 修改手机弹窗 -->
    <el-dialog v-model="showEditPhoneDialog" width="300px" title="编辑" center>
      <div>
        <span>修改手机: </span>
        <el-input />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button class="dialog-close" @click="showEditPhoneDialog = false">取消</el-button>
          <el-button type="primary" class="dialog-sure" @click="phoneDialogSure">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 修改密码弹窗 -->
    <el-dialog v-model="showEditPwdDialog" width="300px" title="编辑" center>
      <div>
        <span>修改密码: </span>
        <el-input />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button class="dialog-close" @click="showEditPwdDialog = false">取消</el-button>
          <el-button type="primary" class="dialog-sure" @click="pwdDialogSure">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    ref
  } from 'vue'
  import {
    useRouter
  } from 'vue-router'
  import {
    useState
  } from '@/store/utils/useState'
  export default defineComponent({
    setup() {
      const showEditPhoneDialog = ref(false)
      const showEditPwdDialog = ref(false)
      const router = useRouter()
      const storeState = useState('user', ['loginUserObj'])
      const editPhoneEvent = () => {
        showEditPhoneDialog.value = true
      }
      const editPwdEvent = () => {
        showEditPwdDialog.value = true
      }
      return {
        showEditPhoneDialog,
        showEditPwdDialog,
        editPhoneEvent,
        editPwdEvent,
        ...storeState
      }
    }
  })
</script>

<style lang="scss" scoped>
  $bluecolor:#3693FF;

  .edit-password {
    margin-left: 150px;
    color: $bluecolor;
  }

  .edit-phone {
    color: $bluecolor;
    margin-left: 46px;
  }
</style>
